<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <script type="text/javascript" src="/static/layui/layui.js"></script>
  <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="/static/front/css/main.css">

  <!--加载meta IE兼容文件-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
  
  <!-- header -->
  <div class="header_box">
    <div class="header">  
      <ul class="app-header">
        <li class="app-header-menuicon">
           <i class="layui-icon layui-icon-more-vertical"></i>
        </li>
      </ul>
      <h1 class="logo">
        <a href="#">logo</a>
      </h1>
      <div class="nav"  style="visibility: visible">
        <a href="index.html" class="active">首页</a>
        <a href="case.html">案例</a>
        <a href="service.html">服务</a>
        <a href="about.html">关于</a>
      </div> 
      <ul class="layui-nav header-down-nav">
        <li class="layui-nav-item"><a href="index.html" class="active">首页</a></li>
        <li class="layui-nav-item"><a href="case.html">案例</a></li>
        <li class="layui-nav-item"><a href="service.html">服务</a></li>
        <li class="layui-nav-item"><a href="about.html">关于</a></li>
      </ul> 
    </div>
  </div>
  <!-- end-header -->


  <!-- content -->
    <div class="content">
      <div class="title">
        <h5>欢迎您的到来</h5>
        <h3>好礼品我们造,用心做好产品</h3>
        <h4>We build good products and make good products.</h4>
      </div>
      <div class="layui-carousel imgbox"  id="test1">
        <div carousel-item  class="imgH">
          <div><img style="width: 100%" src="/static/front/images/sy_banner1.jpg"></div>
          <div><img style="width: 100%" src="/static/front/images/sy_banner1.jpg"></div>
        </div>
      </div>
      <div class="prod-show">
        <div class="layui-fluid">
          <div class="row layui-col-space12 layui-clear">
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
              <div class="img-txt">
                <img style="width: 100%;" src="/static/front/images/sy_img1.jpg" alt="">
                <h3>食品包装</h3>
              </div>
            </div>
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
              <div class="img-txt">
                <img style="width: 100%;" src="/static/front/images/sy_img2.jpg" alt="">
                <h3>食品包装</h3>
              </div>
            </div>
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
              <div class="img-txt">
                <img style="width: 100%;" src="/static/front/images/sy_img3.jpg" alt="">
                <h3>食品包装</h3>
              </div>
            </div>
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
              <div class="img-txt">
                <img style="width: 100%;" src="/static/front/images/sy_img4.jpg" alt="">
                <h3>食品包装</h3>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="prod-descr">
        <div class="layui-fluid">
          <div class="layui-row">
            <div class="item layui-clear">
              <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                <img src="/static/front/images/sy_img5.jpg" class="left-img">
              </div>
              <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                <div class="text">
                  <h3>优秀包装设计美学</h3>
                  <p>本公司专门为您打造定制的商品包装。本公司专门为您打造定制的商品包装。</p>
                  <a href="details.html">查看更多 ></a>
                </div>
              </div>
              <div class="layui-col-xs12 layui-col-sm12 layui-col-md8 bot-img-box">
                <div class="bot-img">
                  <img src="/static/front/images/sy_img6.jpg">
                </div>
              </div>
            </div>
          </div>
          <div class="layui-row">
            <div class="item layui-clear">
              <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                <img src="/static/front/images/sy_img7.jpg" class="left-img">
              </div>
              <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                <div class="text">
                  <h3>上等材质制作包装</h3>
                  <p>本公司专门为您打造定制的商品包装。本公司专门为您打造定制的商品包装。</p>
                  <a href="details.html">查看更多 ></a>
                </div>
              </div>
              <div class="layui-col-xs12 layui-col-sm12 layui-col-md8 bot-img-box">
                <div class="bot-img">
                  <img src="/static/front/images/sy_img8.jpg">
                </div>
              </div>
            </div>
          </div>
          <div class="layui-row">
            <div class="item layui-clear">
              <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                <img src="/static/front/images/sy_img9.jpg" class="left-img">
              </div>
              <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                <div class="text">
                  <h3>高级设备流水制作</h3>
                  <p>本公司专门为您打造定制的商品包装。本公司专门为您打造定制的商品包装。</p>
                  <a href="details.html">查看更多 ></a>
                </div>
              </div>
              <div class="layui-col-xs12 layui-col-sm12 layui-col-md8 bot-img-box">
                <div class="bot-img">
                  <img src="/static/front/images/sy_img610.jpg">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="Partner">
        <div class="title">
          <h3>合作伙伴</h3>
          <h4>cooperative partner</h4>
        </div>
        <div class="cont-box">
          <div class="layui-fluid">
            <div class="row layui-col-space20">
              <div class="layui-col-xs6 layui-col-sm6 layui-col-md2">
                <h2>LOGO</h2>
              </div>
              <div class="layui-col-xs6 layui-col-sm6 layui-col-md2">
                <h2>LOGO</h2>
              </div>
              <div class="layui-col-xs6 layui-col-sm6 layui-col-md2">
                <h2>LOGO</h2>
              </div>
              <div class="layui-col-xs6 layui-col-sm6 layui-col-md2">
                <h2>LOGO</h2>
              </div>
              <div class="layui-col-xs6 layui-col-sm6 layui-col-md2">
                <h2>LOGO</h2>
              </div>
              <div class="layui-col-xs6 layui-col-sm6 layui-col-md2">
                <h2>LOGO</h2>
              </div>
              <div class="layui-col-xs6 layui-col-sm6 layui-col-md2">
                <h2>LOGO</h2>
              </div>
              <div class="layui-col-xs6 layui-col-sm6 layui-col-md2">
                <h2>LOGO</h2>
              </div>
              <div class="layui-col-xs6 layui-col-sm6 layui-col-md2">
                <h2>LOGO</h2>
              </div>
              <div class="layui-col-xs6 layui-col-sm6 layui-col-md2">
                <h2>LOGO</h2>
              </div>
              <div class="layui-col-xs6 layui-col-sm6 layui-col-md2">
                <h2>LOGO</h2>
              </div>
              <div class="layui-col-xs6 layui-col-sm6 layui-col-md2">
                <h2>LOGO</h2>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  
  <!-- end-content -->

  

  <!-- footer -->
  <div class="footer">
    <div class="line"></div>
    <p class="copyright">
      @2016  ALL  ADHFGJKSHH<br />
      E-MAIL:66666666@162.com<br />
      TEL:400-888-888
    </p>
    <div class="icon_box">
      <a href="#"><i class="layui-icon layui-icon-login-wechat weixin-icon"></i></a>
      <a href="#"><i class="layui-icon layui-icon-login-weibo weibo-icon"></i></a>
    </div>
  </div>
  <!-- end-footer -->
  <script>
  layui.use(['carousel','jquery','element'],function(){
    var carousel = layui.carousel,$ = layui.$;
    //建造实例
    carousel.render({
      elem: '#test1'
      ,width: '100%' //设置容器宽度
      ,arrow: 'always'
      ,height:'auto'
      //,anim: 'updown' //切换动画方式
    });
    $('.app-header-menuicon').on('click',function(){
      $('.header-down-nav').toggleClass('down-nav')
    })
    var imgH = $('.imgbox div.layui-this').outerHeight();
    $('.imgH').css('height',imgH+'px')
    window.onresize = function () {
      var imgH = $('.imgbox div.layui-this').outerHeight();
      $('.imgH').css('height',imgH+'px')
    };

  });
  </script>
</body>
</html>